import React, {useRef} from "react";
import {HomeOutlined, LeftOutlined, RightOutlined} from "@ant-design/icons";
import {createStyles} from "antd-style";
import {useNavigate, useSearchParams} from "react-router";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-content: center;
            overflow-x: auto;

            .pointer {
                font-size: 20px;
                justify-content: center;
                transition: all .2s;
                background-color: transparent;
                border: none;
                padding: 0;
                
                &:hover {
                    color: ${token.colorPrimary};
                    background-color: ${token.colorPrimaryBgHover};
                }
            }

            .path-ul {
                display: flex;
                width: 100%;
                overflow-x: auto;
                scroll-behavior: smooth;
                user-select: none;
                position: relative;

                ::-webkit-scrollbar {
                    width: 1px;
                    height: 1px;
                    background-color: transparent;
                }

                &:hover {
                    ::-webkit-scrollbar-track {
                        background-color: ${token.colorPrimaryBg};
                    }

                    ::-webkit-scrollbar-thumb {
                        background-color: ${token.colorPrimary};
                    }
                }

                & > li {
                    display: flex;

                    &:after {
                        display: block;
                        content: "/";
                        padding: 5px;
                    }

                    &:last-child:after {
                        content: none;
                    }

                    button {
                        padding: 5px;
                        font-size: 17px;
                        background-color: transparent;
                        transition: all .2s;
                        border: none;
                        border-radius: 2px;

                        &:hover {
                            color: ${token.colorPrimaryText};
                            background-color: ${token.colorPrimaryBg};
                        }
                    }
                    
                    // 根路径按钮
                    button.root-button {
                        font-size: 17px;
                    }
                }
            }
        `,
    }
})

const PathLi: React.FC<{ path: string }> = ({path}) => {
    const navigate = useNavigate();
    const pathList = path.split(/[\\/]+/g)

    if (path == '/') {
        return (
            <li>
                <button
                    className="root-button"
                    onClick={() => {
                        navigate("?path=/")
                    }}
                ><HomeOutlined/></button>
            </li>
        )
    }

    return (
        <>
            {/*根路径按钮*/}
            <li>
                <button
                    className="root-button"
                    onClick={() => {
                        navigate("?path=/")
                    }}
                ><HomeOutlined/></button>
            </li>
            {pathList.filter(v => v != null && v.length > 0).map((p, i) => {
                // key 单独设置p会出现两个一样的文件夹名称导致key重复，不涉及排序所以连接索引
                return (
                    <li key={p + i}>
                        <button
                            onClick={() => {
                                navigate("?path=" + pathList.slice(0, i + 1).join("/") + "/")
                            }}
                        >{p}</button>
                    </li>
                )
            })}
        </>
    )
}

/**
 * 文件浏览链接
 */
const FileDivePath: React.FC = () => {
    const styles = useStyles().styles
    const pathUl = useRef<HTMLUListElement>(null)
    const [searchParams] = useSearchParams();

    // 点击按钮按方向滚动
    const scrollPath = (direction: 'left' | 'right') => {
        const target = pathUl.current;
        if (target == null) {
            return
        }
        // 点一次走三分之一
        const len = target.scrollWidth / 4
        target.scrollLeft += direction == 'left' ? -len : len
    }

    let path = searchParams.get("path");
    if (path == null) path = '/'
    return (
        <div className={styles.container}>
            <button className="pointer"
                    onClick={() => scrollPath('left')}
            >
                <LeftOutlined/>
            </button>
            <ul className="path-ul"
                ref={pathUl}
            >
                <PathLi path={path}/>
            </ul>
            <button className="pointer"
                    onClick={() => scrollPath('right')}
            >
                <RightOutlined/>
            </button>
        </div>
    )
}

export default FileDivePath
